<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>饼图</title>
</head>
<body>
	<div class="demoTable" style="margin-left: 20px; margin-top: 10px;">
		<div class="layui-inline">
			<div class="layui-input-inline">
				<input type="text" class="layui-input" id="year"
					style="height: 35px; text-align: center;" placeholder="yyyy"
					value="2018">
			</div>
		</div>
	</div>
	<div id="mainone" style="width: 100%; height: 400px;"></div>
	<script src="../../res/layui.all.js" charset="utf-8"></script>
	<script type="text/javascript">
		layui.use('laydate', function() {
			var laydate = layui.laydate;
			//年选择器
			laydate.render({
				elem : '#year',
				type : 'year',
				done : function(value, date, endDate) {
					console.log(value); //得到日期生成的值，如：2017-08-18
					console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
					console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
					setTimeout(function() {
						//$('#mainone').removeAttr('_echarts_instance_');
						//$("#mainone").html("");
						findAllOne();
						findAllTwo();
						findAllThree();
						findAllFour();
					}, 100);
				}
			});
		});

		$(function() {
			$.ajaxSetup({
				async : false
			});
			var date = new Date;
			var nian = date.getFullYear();
			$("#year").val(nian);
			$.ajaxSetup({
				async : true
			});
			findAllOne();
			findAllTwo();
			findAllThree();
			findAllFour();
		});
		function findAllOne() {

			var url = "../../cartogram/findBingAll.action";
			var data = {
				"year" : $("#year").val()
			};
			$.post(url, data, function(mes) {
				findcartogramOne(mes);
			}, "json");

		}

		function findcartogramOne(mes) {
			// 基于准备好的dom，初始化echarts实例
			var myChart = echarts.init(document.getElementById('mainone'));
			option = {
				title : {
					text : '' + $("#year").val() + '零食业绩排行(前10)',
					x : 'center'
				},
				tooltip : {
					trigger : 'item',
					formatter : "{a} <br/>{b} : {c} ({d}%)"
				},
				legend : {
					orient : 'vertical',
					top : 50,
					left : 'right',
					data : mes
				},
				calculable : true,
				series : [ {
					name : '零食销售排行',
					type : 'pie',
					radius : [ 20, 110 ],

					roseType : 'radius',

					lableLine : {
						normal : {
							show : true
						},
						emphasis : {
							show : true
						}
					},
					data : mes
				} ]
			};
			// 使用刚指定的配置项和数据显示图表。
			myChart.setOption(option);
		}
	</script>
</body>
</html>